<template>
    <div>
      <van-nav-bar
        fixed
        :title="film.name"
        @click-left="goBack"
        @click-right="toSearch"
      >
        <template #left>
          <van-icon name="arrow-left" size="18" color="#191a1b" />
        </template>
        <template #right>
          <van-icon name="search" size="18" color="#191a1b" />
        </template>
      </van-nav-bar>
      <van-tabs
        v-model="active"
        color="#ff5f16"
        title-active-color="#ff5f16"
        class="content"
        @click="changeTab()"
      >
        <van-tab
          v-for="obj in showCinemas"
          :title="showDataFormat(obj.showDate)"
          :key="obj.showDate"
        >
          <van-dropdown-menu class="cinemas-nav" active-color="#ff5f16">
            <van-dropdown-item v-model="area" :options="areaOption">
            </van-dropdown-item>
            <van-dropdown-item v-model="last" :options="lastOption" />
          </van-dropdown-menu>
          <cinemaItem
            v-for="cinema in showCinemaList"
            :key="cinema.cinemaId"
            :showDate="obj.showDate"
            :cinema="cinema"
            form="film"
          />
        </van-tab>
      </van-tabs>
    </div>
  </template>
  
  <script>
  import cinemaItem from "@/components/cinema-item.vue";
  
  import dayjs from "dayjs"; 
  import "dayjs/locale/zh-cn";
  dayjs.locale("zh-cn"); 
  import {mapState} from 'vuex'
  export default {
    components: {
      cinemaItem,
    },
    data() {
      return {
        area: "all",
        areaOption: [],
        active: 0,
        last: 1,
        lastOption: [
          { text: "最近去过", value: 1 },
          { text: "离我最近", value: 2 },
        ],
        film: {},
        showCinemas: [],
        cinemaList: [], 
      };
    },
    created() {
      this.getFilmData();
      this.getCinemasData();
    },
    computed: {
      ...mapState(['cityId']),
      showCinemaList() {
        if (this.area === "all") {
          return this.cinemaList;
        } else {
          return this.cinemaList.filter((item) => item.districtId === this.area);
        }
      },
    },
    methods: {
      getDistricts(cinemas) {
        let districts = [];
        cinemas.forEach((el) => {
          if (!districts.map((item) => item.value).includes(el.districtId)) {
            let obj = {
              text: el.districtName,
              value: el.districtId,
            };
            districts.push(obj);
          }
        });
  
        let obj = { text: "全城", value: "all" };
        districts.unshift(obj);
        this.areaOption = districts;
      },
      changeTab() {
        let cinemaIds = this.showCinemas[this.active].cinemaList.join(",");
        this.getCinemaList(cinemaIds);
      },
      showDataFormat(showDate) {
        return dayjs(showDate * 1000).format("周dd M月D日");
      },
      toSearch() {
        this.$router.push("/cinemas/search");
      },
      goBack() {
        this.$router.go(-1);
      },
      async getFilmData() {
        let res = await this.$api({
          headers: {
            "X-host": "mall.film-ticket.film.info",
          },
          url: "https://m.maizuo.com/gateway",
          method: "get",
          params: {
            filmId: this.$route.params.filmId,
            k: 4786716,
          },
        });
        this.film = res.data.data.film;
      },
      async getCinemasData() {
        let res = await this.$api({
          headers: {
            "X-host": "mall.film-ticket.cinema.film-show-cinema",
          },
          method: "get",
          url: "https://m.maizuo.com/gateway/?filmId=6681&cityId=110100&k=3124768",
          params: {
            filmId: this.$route.params.filmId,
            cityId: this.cityId,
            k:3124768,
          },
        });
        this.showCinemas = res.data.data.showCinemas;
        this.changeTab();
      },
      async getCinemaList(cinemaIds) {
        let res = await this.$api({
          headers: {
            "X-host": "mall.film-ticket.cinema.batch-cinema",
          },
          method: "post",
          url: "https://m.maizuo.com/gateway",
          params: {
            k: 518146,
          },
          data: {
            cityId: this.cityId,
            cinemaIds: cinemaIds,
          },
        });
        console.log("res--cinemas", res);
        this.cinemaList = res.data.data.cinemas;
        this.getDistricts(this.cinemaList);
      },
    },
  };
  </script>
  
<style scopd>
.content {
    padding-top: 44px;
}
</style>